<template>
    <div class="main">
        <div class="swiper-container box">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <img src="http://localhost:53000/1.jpg"/>
                </div>
                <div class="swiper-slide">
                    <img src="http://localhost:53000/2.jpg"/>
                </div>
                <div class="swiper-slide">
                    <img src="http://localhost:53000/3.jpg"/>
                </div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>
        </div>
        <router-link to="/news/1">页面1</router-link>
        <router-link to="/news/1">页面2</router-link>
        <router-link to="/news/1">页面3</router-link>
    </div>
</template>

<script>

import Swiper from 'swiper';
import 'swiper/css/swiper.min.css'
export default {
    mounted () {
        new Swiper('.swiper-container', {
            autoplay: true,//可选选项，自动滑动
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
        })
    }
};
</script>

<style>

.box{
    border: 1px solid gray;
    height:300px;
}

.swiper-slide img{
    width:100%;
    height:300px;
}
</style>